<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>商戶端</el-breadcrumb-item>
      <el-breadcrumb-item>{{ routeName }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const asyncRoutes = [];
const files = import.meta.glob("@/router/modules/*.js", { eager: true });
for (const f in files) {
  const o = files[f].default;
  asyncRoutes.push(o);
}
// console.log(asyncRoutes, "路由菜单");
const routeName = ref();
onMounted(() => {
  const route = window.location.hash.substr(1);
  asyncRoutes.map((item) => {
    if (item.path === route) {
      console.log("routeName ===>", item.meta.title);
      routeName.value = item.meta.title;
    }
  });
});
</script>

<style lang="less">
.el-breadcrumb__inner {
  font-weight: 600;
  font-size: 14px;
  color: #666666;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}
</style>